<template>
  <div class="main">
    <div class="title">工作台</div>
    <div id="graph"></div>
    <div class="title">门市</div>
    <div class="app-body">
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon1.svg" alt="" @click="$router.push('/goods')">
        </div>
        <span>门市商品</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon2.svg" alt="" @click="$router.push('/Goods/historyPrice')">

        </div><span>历史价格</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon3.svg" alt="" @click="$router.push('/zd/query')">

        </div> <span>出货账单</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon4.svg" alt="" @click="$router.push('/zd/jhquery')">

        </div><span>进货账单</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon5.svg" alt="" @click="$router.push('/zd/queryOrder')">

        </div><span>查询订单</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon6.svg" alt="" @click="$router.push('/custom/index')">

        </div><span>查询客户</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon7.svg" alt="" @click="$router.push('/zd/detail')">

        </div><span>查询账单</span>
      </div>
      <div class="app-item">
        <div class="app-icon" style="background-color: #f0fcf9;display: flex;align-items: center;justify-content: center">
          <img src="../../assets/icon12.svg" style="width: 40px;" alt="" @click="$router.push('/zd/statistic')">

        </div><span>重量统计</span>
      </div>
      <div class="app-item">
        <div class="app-icon" style="background-color: #f0fcf9;display: flex;align-items: center;justify-content: center">
          <img src="../../assets/icon13.svg" style="width: 40px;" alt="" @click="$router.push('/Goods/series')">

        </div><span>系列统计</span>
      </div>
      <div class="app-item">
        <div class="app-icon" style="background-color: #f0fcf9;display: flex;align-items: center;justify-content: center">
          <img src="../../assets/icon13.svg" style="width: 40px;" alt="" @click="$router.push('/custom/exportList')">

        </div><span>导出对账单</span>
      </div>
      <div class="app-item">
        <div class="app-icon" style="background-color: #f0fcf9;display: flex;align-items: center;justify-content: center">
          <img src="../../assets/icon14.svg" style="width: 40px;" alt="" @click="$router.push('/advance/index')">

        </div><span>高级查询</span>
      </div>
      <div class="app-item">
        <div class="app-icon" style="background-color: #f0fcf9;display: flex;align-items: center;justify-content: center">
          <img src="../../assets/icon15.svg" style="width: 40px;" alt="" @click="$router.push('/alert')">

        </div><span>库存报警</span>
      </div>
    </div>
    <div class="title">仓库</div>
    <div class="app-body">
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon8.svg" alt="" @click="$router.push('/Goods/ckquery')">

        </div><span>仓库商品</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon9.svg" alt="" @click="$router.push('/zd/ckQuery')">

        </div><span>仓库提货</span>
      </div>
      <div class="app-item">
        <div class="app-icon">
          <img src="../../assets/icon10.svg" alt="" @click="$router.push('/zd/ckPur')">

        </div><span>仓库入货</span>
      </div>
    </div>
<!--    <el-tabs v-model="activeName" type="border-card">-->
<!--      <el-tab-pane label="营业分析" name="index">-->

<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="门市" name="first">-->

<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="仓库" name="second">-->

<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="管理类" name="third">-->
<!--        <div class="app-body">-->
<!--          <div class="app-item">-->
<!--            <div class="app-icon">-->
<!--              <img src="../../assets/icon9.svg" alt="" @click="$router.push('/hr/index')">-->
<!--              <span>考勤情况</span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
<!--    </el-tabs>-->
    <div>
      <!--      <el-button type="primary" @click="$router.push('/Goods/query')">查询商品</el-button>-->
      <!--      <el-button type="primary" @click="$router.push('/custom/index')">查询客户</el-button>-->
      <!--      <el-button type="primary" @click="$router.push('/zd/query')">查询账单</el-button>-->
    </div>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getEffi, getTodayEffi, getSumStatistic} from "@/api/goods";
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      time: new Date().toLocaleString(),
      sumStatistic: [],
      jeList: [],
      mlList: [],
      rqList: [],
      dialogVisible: true,
      activeName: "index"
    }
  },
  created() {
    setInterval(() => {
      this.time = new Date().toLocaleString()
    }, 1000)
  },
  mounted() {
    let today = new Date()
    let lastWeek = new Date()
    lastWeek.setTime(lastWeek.getTime() - 31 * 24 * 60 * 60 * 1000)
    let data = {
      endTime: today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(),
      startTime: lastWeek.getFullYear() + "-" + (lastWeek.getMonth() + 1) + "-" + lastWeek.getDate()
    }
    this.$buryingPoint('驾驶舱', '进入驾驶舱')
    getSumStatistic(data).then((res) => {
      res.data.forEach((each) => {
        this.jeList.push(each.je)
        this.rqList.push(each.rq)
        this.mlList.push(each.ml)
      })
    }).finally(() => {
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("graph"))
        let rq = this.rqList
        var option = {
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 75,
              end: 100
            },
            {
              type: 'inside',
              realtime: true,
              start: 75,
              end: 100
            }
          ],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ["营业额", "毛利"]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: rq
          },
          yAxis: [{
            type: 'value',
            name: '营业额',
            // min : 0,
            // max : 11000,
            position: 'left',
            axisLine: {
              lineStyle: {}
            },
            axisLabel: {
              formatter: '{value}'
            }
          }, {
            type: 'value',
            name: '毛利',
            // min : 0,
            // max : 200,
            position: 'right',
            axisLine: {
              lineStyle: {}
            },
            axisLabel: {
              formatter: '{value}'
            }
          }],
          series: [
            {
              name: "营业额",
              data: this.jeList,
              type: 'line',
              smooth: true
            },
            {
              name: "毛利",
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#8cd5c2', //改变折线点的颜色
                  lineStyle: {
                    color: '#8cd5c2' //改变折线颜色
                  }
                }
              },
              data: this.mlList,
              type: 'line',
              smooth: true
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function(){
          window.onresize = function (){
            myChart.resize()
          }
        })
      })
    })

  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 600px;
  padding: 10px;
  background-color: #f8f9fc;

  .title {
    margin: 10px 0;
    font-size: 20px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    &:before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 18px;
      margin-right: 10px;
      border-radius: 8px;
      background-color: #4271ff;
    }
  }

  #graph {
    width: 100%;
    height: 100vw;
    max-height: 500px;
  }

  .banner{
    height: 210px;

    .el-carousel{
      height: 100%;

      .el-carousel__container{
        height: 100% !important;
      }
    }

    img{
      border-radius: 20px;
      width: 100%;
      height: 210px;
    }

  }

  .app-body {
    display: flex;
    flex-wrap: wrap;
    min-height: 100px;
    background-color: rgba(255, 255, 255, 0.25);
    padding-bottom: 10px;
    border-radius: 8px;
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;

    .app-item {
      //border: 1px solid black;
      width: 25%;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
       span {
         font-size: 13px;
         margin-top: 10px;
       }

      .app-icon {
        height: 58px;
        width: 58px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 18px;

        img {
          cursor: pointer;
          width: 100%;
          height: 100%;
          //box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2),0 7px 10px 1px rgba(0, 0, 0, .2),0 2px 16px 1px rgba(0, 0, 0, .2);
        }

        span {
          font-size: 0.8rem;
          margin-top: 5px;
          text-align: center;
        }
      }
    }
  }
}
</style>
